<template>
  <div class="page">
    <!-- 侧边导航栏 -->
    <nav class="sidebar">
      <ul>
        <li @click="navigateTo('/welcome')">基地详情</li>
          <li @click="navigateTo('/BaseAdd')">基地添加</li>
          <li @click="navigateTo('/BaseDelete')">基地删除</li>
          <li @click="navigateTo('/BaseEdit')">基地修改</li>
          <li @click="navigateTo('/ClassOpen')">开课管理</li>
        <!-- 添加其他导航选项 -->
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="content">
      <button class="test_goBack" @click="goBack">返回登录</button>
      <h1>欢迎登录基地管理系统</h1>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <p>
        <span class="head1">基地名称：</span>
        <span class="head2">基地代码：</span>
      </p>
     
      <input class="select1"  style="background-color: rgb(194, 187, 187);">
      
        <input class="select2" style="background-color: rgb(194, 187, 187);">
      
      
      <p>
        <span class="head1">基地管理员：</span>
        <span class="head2">其他管理员联系方式：</span>
      </p>
      <p >
        <input class="select1" style="background-color: rgb(194, 187, 187);">
        
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
       
      </p>
      <p class="head0">基地管理员邮箱：</p>
      <p class="test0">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
        
       
      </p>

      <p>
        <span class="head1">区域-中文：</span>
        <span class="head2">培训基地-中文：</span>
      </p>
      <p>
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
        
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
       
      </p>      
      <p>
        <span class="head1">区域-英文：</span>
        <span class="head2">培训基地-英文：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
       
        <input class="select2" style="background-color: rgb(194, 187, 187);">
       
        </p>   
      <p>
        <span class="head1">区域-中文繁体：</span>
        <span class="head2">培训基地-中文繁体：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
        
        <input class="select2"  style="background-color: rgb(194, 187, 187);">
       
      </p>   
      <p>
        <span class="head1">培训地点-中文：</span>
        <span class="head2">基地描述-中文：</span>
      </p>
      <p class="test">
        <input  class="select1" style="background-color: rgb(194, 187, 187);">
      
        <input  class="select2" style="background-color: rgb(194, 187, 187);">
     
      </p>   
      <p>
        <span class="head1">培训地点-英文：</span>
        <span class="head2">基地描述-英文：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
    
        <input class="select2" style="background-color: rgb(194, 187, 187);">
      
      </p> 
      <p>
        <span class="head1">培训地点-中文繁体：</span>
        <span class="head2">基地描述-中文繁体：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
     
        <input class="select2" style="background-color: rgb(194, 187, 187);">
    
      </p> 
       <p>
        <span class="head1">创建时间：</span>
        <span class="head2">创建人：</span>
      </p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
     
        <input class="select2" style="background-color: rgb(194, 187, 187);">
      
      </p> 
      <p class="head0">更新人：</p>
      <p class="test">
        <input class="select1" style="background-color: rgb(194, 187, 187);">
      </p>

      <button @click="sendADDRequest" class="btn">添加</button>
      

    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';
// import { useRouter } from 'vue-router';
window.onload = function() {
      // 使用alert函数弹出对话框
      alert('登录大成功！');
    };
    
export default {
  setup() {
    const router = useRouter();

    // 导航到指定路由
    function navigateTo(route) {
      router.push(route);
    }

    // 返回登录页面
    function goBack() {
      router.push('/');
    }

    return {
      navigateTo,
      goBack,
    };
  },

  methods: {
    sendADDRequest() {
      axios.get('http://localhost:5000/add_data')
        .then(response => {
          alert("添加成功")
        })
        .catch(error => {
          console.error('修改请求错误:', error);
        });
    }
  }

};
</script>

<style scoped>
/* 样式调整，使导航栏在左侧并占据整个左侧高度 */
.page {
  display: flex;
}

.select1{
  width:20% ;
  margin-left: -28%;
  
}

.btn{
  margin-left: -28%;
}

.select2{
  width:20% ;
  margin-left: 10%;
}
.head1 {
  margin-left: -28%;
}

.head2 {
  margin-left: 20%;
}
.sidebar {
  width: 10%;
  /* 可根据需求调整宽度 */
  background-color: #333;
  color: white;
  height: auto;
  /* 100%视窗高度，占据整个左侧高度 */
  overflow-y: auto;
  /* 如果内容超出高度，添加滚动条 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.head0{
  margin-left: -25%;
}



.content {
  flex: 1;
  /* 填充剩余空间 */
  padding: 20px;
  color: rgb(0, 0, 0);
  background-color: rgb(245, 245, 245);

}


.test_goBack {
  margin-right: -90%;
}


/* 样式调整，使导航选项看起来更明显 */
.sidebar ul li:hover {
  background-color: #555;
}
</style>